<template>
  <div
    v-loading="accessPlanLoading"
    id="accessplan"
    class="main-div main-div-nopadding"
  >
    <el-container v-loading="accessPlanOperateLoading">
      <el-main class="el-main-padding my-test">
        <div class="my-breadcrumb-div">
          <i class="el-icon-location my-breadcrumb-icon my-breadcrumb-padding" />
          <el-breadcrumb
            class="my-breadcrumb-padding"
            separator="/"
          >
            <el-breadcrumb-item>
              <!--配置-->
              {{ $t('message.accessPlan.breadcrumb.crumb1') }}
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              <!--接入预案-->
              {{ $t('message.accessPlan.breadcrumb.crumb2') }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 配置 -->
        <el-row class="margin-bottom-row config-row">
          <el-col>
            <el-card v-loading="accessPlanConfig.configLoading">
              <div
                class="card-header-div config-header-div"
              >
                <!--前向主轴参数-->
                {{ $t('message.accessPlan.accessPlan.config.header') }}
              </div>
              <!-- 警示警告 -->
              <el-alert
                style="margin-top: 10px"
                :title="$t('message.accessPlan.accessPlan.configAlertInfo')"
                type="info"
                effect="dark"
              />
              <el-form
                :model="accessPlanConfig"
                ref="accessPlanConfigForm"
                style="margin-top: 20px"
                class="demo-ruleform"
                label-width="110px"
                :rules="accessPlanConfigRules"
                inline
              >
                <!-- 调制方式 -->
                <el-form-item
                  :label="$t('message.accessPlan.accessPlan.config.modulation_type')"
                  prop="modulation_type"
                >
                  <el-select
                    v-model="accessPlanConfig.modulation_type"
                  >
                    <el-option
                      v-for="item in accessPlanConfig.modulation_typeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <!-- 前向纠错编码率 -->
                <el-form-item
                  label-width="125px"
                  :label="$t('message.accessPlan.accessPlan.config.fec_code_rate')"
                  prop="fec_code_rate"
                >
                  <el-select
                    v-model="accessPlanConfig.fec_code_rate"
                  >
                    <el-option
                      v-for="item in accessPlanConfig.fec_code_rateOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <!-- 前向纠错编码 -->
                <el-form-item
                  :label="$t('message.accessPlan.accessPlan.config.fec_type')"
                  prop="fec_type"
                >
                  <el-select
                    v-model="accessPlanConfig.fec_type"
                  >
                    <el-option
                      v-for="item in accessPlanConfig.fec_typeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <!-- 速率 -->
                <el-form-item
                  :label="$t('message.accessPlan.accessPlan.config.speed')"
                  prop="speed"
                >
                  <el-select
                    v-model="accessPlanConfig.speed"
                  >
                    <el-option
                      v-for="item in accessPlanConfig.speedOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <!-- 功率 -->
                <!-- 请输入功率 -->
                <el-form-item
                  :label="$t('message.accessPlan.accessPlan.config.power')"
                  prop="power"
                >
                  <el-input
                    v-model="accessPlanConfig.power"
                  />
                </el-form-item>
                <el-form-item style="display: block;text-align: right;">
                  <el-button
                    v-if="$store.state.is_staff"
                    type="primary"
                    @click="accessPlanConfigSubmit"
                  >
                    {{ $t('message.accessPlan.accessPlan.config.confirmButton') }}
                  </el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
        </el-row>
        <!--成员-->
        <el-row>
          <el-col :span="24">
            <el-card
              class="margin-bottom-row"
              style="text-align: left"
            >
              <div
                style="margin-bottom: 10px"
                class="card-header-div"
              >
                <!--成员-->
                {{ $t('message.virtualSubnet.user.header') }}
                <el-button
                  v-if="$store.state.is_staff"
                  @click="handleAccessPlanMemberCreate"
                  style="padding: 0 0 0 5px"
                  type="text"
                >
                  <i
                    class="el-icon-plus"
                    style="font-weight: bold"
                  />
                </el-button>
              </div>
              <!--成员表格-->
              <div>
                <el-table
                  max-height="680px"
                  header-cell-class-name="my-table-header-cell my-table-header-cell-center"
                  cell-class-name="my-table-cell my-table-cell-center"
                  :data="accessPlanMemberList"
                >
                  <el-table-column type="index" />
                  <!--终端编号-->
                  <el-table-column
                    :label="$t('message.accessPlan.member.table.header.col1')"
                    prop="device"
                  />
                  <!--终端号码-->
                  <el-table-column
                    :label="$t('message.accessPlan.member.table.header.col2')"
                    prop="number"
                  />
                  <!--地球站名称-->
                  <el-table-column
                    :label="$t('message.accessPlan.member.table.header.col3')"
                    prop="station_name"
                  />
                  <!--速率-->
                  <el-table-column
                    :label="$t('message.accessPlan.member.table.header.col4')"
                    prop="speedShow"
                  />
                  <!--操作-->
                  <el-table-column
                    v-if="$store.state.is_staff"
                    :label="$t('message.common.label.operate')"
                  >
                    <template slot-scope="scope">
                      <el-button
                        style="padding: 0 0 0 5px"
                        @click="handleAccessPlanMemberChangeSpeed(scope.$index, scope.row)"
                        type="text"
                      >
                        <img src="@/assets/common/edit.png">
                      </el-button>
                      <el-button
                        style="padding: 0 0 0 5px"
                        @click="handleAccessPlanMemberDelete(scope.$index, scope.row)"
                        type="text"
                      >
                        <img src="@/assets/common/delete.png">
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>

    <!--dialog-->

    <!--access plan members-->
    <el-dialog
      :title="$t('message.accessPlan.dialog.accessPlanMember.title')"
      width="1000px"
      :visible.sync="accessPlanMember.visible"
      @closed="handleAccessPlanMemberDialogClosed"
    >
      <el-alert
        :title="$t('message.accessPlan.dialog.accessPlanMember.alert')"
        type="info"
        effect="dark"
      />
      <div class="form-table-content">
        <!--左侧表单-->
        <div class="form-table-content-form">
          <el-form
            ref="accessPlanMemberForm"
            :model="accessPlanMember.form"
            :rules="accessPlanMemberFormRules"
            label-width="120px"
          >
            <!--device-->
            <el-form-item
              :label="$t('message.accessPlan.dialog.accessPlanMember.form.device')"
              prop="device"
            >
              <span>{{ accessPlanMember.form.cu.device }}</span>
            </el-form-item>
            <!--speed-->
            <el-form-item
              :label="$t('message.accessPlan.dialog.accessPlanMember.form.speed')"
              prop="speed"
            >
              <el-select
                :loading="accessPlanMember.speedOptionLoading"
                v-model="accessPlanMember.form.speed"
                :placeholder="$t('message.common.info.selectPlaceholder')"
                :loading-text="$t('message.common.info.selectPlaceholderLoading')"
              >
                <el-option
                  v-for="item in accessPlanMember.speedOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <!--右侧选择cu表格-->
        <div class="form-table-content-table">
          <div style="text-align: left">
            <el-input
              size="small"
              style="margin-bottom: 20px;width: 200px"
              :placeholder="$t('message.accessPlan.dialog.accessPlanMember.addCuTable.search_text')"
              v-model="filterText"
            />
            <el-button
              @click="getAccessPlanCusList"
              style="margin-left: 15px"
              size="small"
              type="primary"
            >
              <!--查询-->
              {{ $t('message.accessPlan.dialog.accessPlanMember.searchButton') }}
            </el-button>
          </div>
          <!-- 终端列表 -->
          <el-table
            ref="cusForPlanTable"
            height="380px"
            header-cell-class-name="my-table-header-cell my-table-header-cell-center"
            cell-class-name="my-table-cell my-table-cell-center"
            :row-style="{cursor: 'pointer'}"
            highlight-current-row
            @row-click="handleCusForPlanTableRowClick"
            :data="cusForPlan"
          >
            <el-table-column type="index" />
            <!--终端编号-->
            <el-table-column
              :label="$t('message.accessPlan.dialog.accessPlanMember.addCuTable.device')"
              prop="device"
            />
            <!--终端号码-->
            <el-table-column
              :label="$t('message.accessPlan.dialog.accessPlanMember.addCuTable.number')"
              prop="number"
            />
            <!--所属地球站-->
            <el-table-column
              :label="$t('message.accessPlan.dialog.accessPlanMember.addCuTable.station_name')"
              prop="station_name"
            />
            <!--所属部门-->
            <el-table-column
              :label="$t('message.accessPlan.dialog.accessPlanMember.addCuTable.dept_name')"
              prop="dept_name"
            />
          </el-table>
          <el-pagination
            @size-change="handleSearchCuSizeChange"
            @current-change="handleSearchCuPageChange"
            class="pagination-position"
            background
            :page-sizes="[10, 20, 50]"
            :page-size="cusForPlanPagination.pageSize"
            layout="total, sizes, prev, pager, next"
            :total="cusForPlanPagination.total"
          />
        </div>
      </div>
      <div slot="footer">
        <el-button
          :loading="accessPlanMember.submitButtonLoading"
          @click="accessPlanMemberSubmit()"
          type="primary"
        >
          <!--确定-->
          {{ $t('message.p2p.dialog.p2p.create.footer.button.submit') }}
        </el-button>
      </div>
    </el-dialog>
    <!--change member speed-->
    <el-dialog
      :title="$t('message.accessPlan.dialog.memberSpeed.title')"
      width="20%"
      :visible.sync="accessPlanMemberSpeed.visible"
    >
      <el-form
        @submit.native.prevent
        ref="accessPlanMemberSpeedForm"
        :model="accessPlanMemberSpeed.form"
        label-width="120px"
      >
        <!--速率-->
        <el-form-item
          :label="$t('message.accessPlan.dialog.memberSpeed.form.speed')"
          prop="speed"
        >
          <el-select
            :loading="accessPlanMemberSpeed.speedOptionLoading"
            v-model="accessPlanMemberSpeed.form.speed"
            :placeholder="$t('message.common.info.selectPlaceholder')"
            :loading-text="$t('message.common.info.selectPlaceholderLoading')"
          >
            <el-option
              v-for="item in accessPlanMemberSpeed.speedOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="button-form-item">
          <el-button
            :loading="accessPlanMemberSpeed.submitButtonLoading"
            @click="accessPlanMemberSpeedChangeSubmit"
            type="primary"
          >
            {{ $t('message.common.button.confirm') }}
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import service from '@/service/service'

export default {
  name: 'AcessPlan',

  watch: {
    'accessPlanMember.form.cu': {
      handler: async function (val) {
        if (val) {
          this.accessPlanMember.speedOptionLoading = true
          try {
            this.accessPlanMember.speedOption = await this.getAccessPlanMemberSpeed(val.id)
          } finally {
            this.accessPlanMember.speedOptionLoading = false
          }
        } else {
          this.accessPlanMember.form.speed = ''
          this.accessPlanMember.speedOption = []
        }
      }
    },
    cusForPlan: {
      handler: async function (val) {
        this.$nextTick(() => {
          if (this.accessPlanMember.form.cu) {
            let row = this.cusForPlan.find(cuItem => cuItem.id === this.accessPlanMember.form.cu.id)
            this.$refs.cusForPlanTable.setCurrentRow(row)
          }
        })
      },
      deep: true
    },
    // 监听两个选项，从而从接口获得speedOptions
    'accessPlanConfig.modulation_type': {
      handler: function (val) {
        if (this.accessPlanConfig.modulation_type && this.accessPlanConfig.fec_code_rate) {
          this.getSpeedOption()
        }
      },
      deep: true
    },
    'accessPlanConfig.fec_code_rate': function (val) {
      if (this.accessPlanConfig.modulation_type && this.accessPlanConfig.fec_code_rate) {
        this.getSpeedOption()
      }
    }
  },
  computed: {
    cuList () {
      return this.$store.getters.deptTreeForSelectCu
    },
    accessPlanMemberList () {
      return this.accessPlanMembers.map(memberItem => {
        return {
          ...memberItem,
          speedShow: service.miliFormat(memberItem.speed)
        }
      })
    }
  },

  data () {
    return {
      filterText: '',

      accessPlanLoading: false,
      accessPlanOperateLoading: false,
      accessPlanLoadingTimeout: null,
      accessPlans: [],
      accessPlanMembers: [],

      accessPlanConfigRules: {
        modulation_type: [
          { required: true, message: this.$t('message.accessPlan.accessPlan.configError.modulation_type'), trigger: 'change' }
        ],
        fec_code_rate: [
          { required: true, message: this.$t('message.accessPlan.accessPlan.configError.fec_code_rate'), trigger: 'change' }
        ],
        fec_type: [
          { required: true, message: this.$t('message.accessPlan.accessPlan.configError.fec_type'), trigger: 'change' }
        ],
        speed: [
          { required: true, message: this.$t('message.accessPlan.accessPlan.configError.speed'), trigger: 'change' }
        ],
        power: [
          { required: true, message: this.$t('message.accessPlan.accessPlan.configError.power[0]'), trigger: 'blur' }
          // { validator: validatePower, message: this.$t('message.accessPlan.accessPlan.configError.power[1]'), trigger: 'blur' }
        ]
      },
      accessPlanConfig: {
        id: -1,
        configLoading: false,

        modulation_type: null,
        modulation_typeOptions: [],
        fec_type: null,
        fec_typeOptions: [],
        fec_code_rate: null,
        fec_code_rateOptions: [],
        speed: null,
        speedOptions: [],
        power: null
      },

      cusForPlanPagination: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      cusForPlan: [],

      accessPlanMember: {
        visible: false,
        speedOptionLoading: false,
        submitButtonLoading: false,

        speedOption: [],
        form: {
          plan: null,
          cu: '',
          speed: ''
        }
      },
      accessPlanMemberFormRules: {
        cu: [
          { required: true, message: this.$t('message.accessPlan.dialog.accessPlanMember.form.validate.device'), trigger: 'change' }
        ],
        speed: [
          { required: true, message: this.$t('message.accessPlan.dialog.accessPlanMember.form.validate.speed'), trigger: 'change' }
        ]
      },

      accessPlanMemberSpeed: {
        visible: false,
        editIndex: -1,
        submitButtonLoading: false,
        speedOptionLoading: false,
        id: null,

        speedOption: [],
        form: {
          speed: ''
        }
      }
    }
  },

  async mounted () {
    let self = this
    self.getAccessPlanConfig()
    await self.getAccessPlan()
    if (self.accessPlans[0]) self.getAccessPlanMember()
  },

  methods: {
    async getSpeedOption () {
      let self = this
      try {
        self.accessPlanConfig.configLoading = true
        let response = await self.$store.dispatch(`axios`, {
          method: 'get',
          url: `/api/abs/devices/cus/support_rates_by_args/`,
          params: {
            modulation_type: self.accessPlanConfig.modulation_type,
            fec_code_rate: self.accessPlanConfig.fec_code_rate
          }
        })
        self.accessPlanConfig.speedOptions = response.data.map(speedItem => {
          return {
            label: `${service.miliFormat(speedItem)}`,
            value: speedItem
          }
        })
        // 针对已有选项判断该选项在新的列表里是否存在。
        if (self.accessPlanConfig.speed) {
          let ifExist = self.accessPlanConfig.speedOptions.find(speedItem => speedItem.value === self.accessPlanConfig.speed)
          if (!ifExist) self.accessPlanConfig.speed = null
        }
      } finally {
        self.accessPlanConfig.configLoading = false
      }
    },
    async getAccessPlanConfig () {
      let self = this
      try {
        self.accessPlanConfig.configLoading = true
        self.accessPlanConfig.modulation_typeOptions = service.getOptionList(self.$t('message.define.cu.modulation_type'))
        self.accessPlanConfig.fec_typeOptions = service.getOptionList(self.$t('message.define.cu.fec_type'))
        self.accessPlanConfig.fec_code_rateOptions = service.getOptionList(self.$t('message.define.cu.fec_code_rate'))
        let response = await self.$store.dispatch(`axios`, {
          method: 'get',
          url: `/api/abs/devices/forward_carrier_param/`
          // params: {
          //   plan: self.accessPlans[0].id
          // }
        })
        let config = response.data[0]
        this.accessPlanConfig.id = config.id
        this.accessPlanConfig.modulation_type = config.modulation_type
        this.accessPlanConfig.fec_type = config.fec_type
        this.accessPlanConfig.fec_code_rate = config.fec_code_rate
        this.accessPlanConfig.speed = config.speed
        this.accessPlanConfig.power = config.power
      } finally {
        self.accessPlanConfig.configLoading = false
      }
    },
    async accessPlanConfigSubmit () {
      let self = this
      if (!self.accessPlanConfig.id) {
        self.$message.error(self.$t('message.accessPlan.accessPlan.configSubmitError'))
        return
      }
      try {
        await self.$refs['accessPlanConfigForm'].validate()
        await self.$store.dispatch(`axios`, {
          method: 'put',
          url: `/api/abs/devices/forward_carrier_param/${self.accessPlanConfig.id}/`,
          data: {
            modulation_type: self.accessPlanConfig.modulation_type,
            fec_code_rate: self.accessPlanConfig.fec_code_rate,
            fec_type: self.accessPlanConfig.fec_type,
            speed: self.accessPlanConfig.speed,
            power: parseFloat(self.accessPlanConfig.power)
          }
        })
        self.$message.success(self.$t('message.common.info.modifySuccess'))
        self.loadingControl()
        // ncp暂未提供返回接口，待更新后修改
        self.getAccessPlanConfig()
        // let config = response.data
        // this.accessPlanConfig.id = config.id
        // this.accessPlanConfig.modulation_type = config.modulation_type
        // this.accessPlanConfig.fec_type = config.fec_type
        // this.accessPlanConfig.fec_code_rate = config.fec_code_rate
        // this.accessPlanConfig.speed = config.speed
        // this.accessPlanConfig.power = config.power
      } catch (e) {
        // self.$message.error('未通过校验')
      }
    },
    async getAccessPlan () {
      let self = this
      self.accessPlanLoading = true
      let response = await self.$store.dispatch(`axios`, {
        method: 'get',
        url: '/api/abs/devices/ip_access_plan/'
      })
      self.accessPlans = response.data
      self.accessPlanLoading = false
    },

    async getAccessPlanMember () {
      let self = this
      self.accessPlanLoading = true
      let response = await self.$store.dispatch(`axios`, {
        method: 'get',
        url: `/api/abs/devices/ip_access_member/`,
        params: {
          plan: self.accessPlans[0].id
        }
      })
      self.accessPlanMembers = response.data
      self.accessPlanLoading = false
    },

    handleAccessPlanMemberDialogClosed () {
      let self = this
      self.cusForPlanPagination = {
        page: 1,
        pageSize: 10,
        total: 0
      }
      self.cusForPlan = []
      self.accessPlanMember.form.cu = ''
      self.accessPlanMember.form.speed = ''
      self.accessPlanMember.form.speedOption = []
    },
    async getAccessPlanMemberSpeed (cuId) {
      let self = this
      let response = await self.$store.dispatch('axios', {
        method: 'get',
        url: `/api/abs/devices/cus/${cuId}/support_rates/`
      })
      return response.data.map(speedItem => {
        return {
          label: `${service.miliFormat(speedItem)}`,
          value: speedItem
        }
      })
    },
    // 终端表格相关
    async getAccessPlanCusList () {
      // /devices/cus_for_plan/
      let self = this
      let response = await self.$store.dispatch('axios', {
        method: 'get',
        url: `/api/abs/devices/cus_for_plan/`,
        params: {
          device: self.filterText,

          page: self.cusForPlanPagination.page || 1,
          page_size: self.cusForPlanPagination.pageSize || 10
        }
      })
      self.cusForPlan = response.data.results
      self.cusForPlanPagination.total = response.data.count
    },
    handleSearchCuSizeChange (size) {
      let self = this
      self.cusForPlanPagination.page = 1
      self.cusForPlanPagination.pageSize = size
      self.getAccessPlanCusList()
    },
    handleSearchCuPageChange (page) {
      let self = this
      self.cusForPlanPagination.page = page
      self.getAccessPlanCusList()
    },
    handleCusForPlanTableRowClick (row) {
      let self = this
      self.accessPlanMember.form.cu = row
    },

    async handleAccessPlanMemberCreate () {
      let self = this
      if (!self.accessPlans[0]) {
        // 请先选择预案再添加成员
        self.$message.error(self.$t('message.accessPlan.message.errors.err1'))
        return
      }
      self.accessPlanMember.form.plan = self.accessPlans[0].id
      self.getAccessPlanCusList()
      self.accessPlanMember.visible = true
    },
    async accessPlanMemberSubmit () {
      let self = this
      if (!self.accessPlanMember.form.cu) {
        // 请先选择添加的成员再提交
        self.$message.error(self.$t('message.accessPlan.message.errors.err2'))
        return
      }
      try {
        self.accessPlanMember.submitButtonLoading = true
        let response = await self.$store.dispatch(`axios`, {
          method: 'post',
          url: '/api/abs/devices/ip_access_member/',
          data: {
            ...self.accessPlanMember.form,
            cu: self.accessPlanMember.form.cu.id
          }
        })
        self.accessPlanMembers.push(response.data)
        self.$message({
          message: self.$t('message.common.info.addSuccess'),
          type: 'success'
        })
        self.accessPlanMember.visible = false
        self.loadingControl()
      } finally {
        self.accessPlanMember.submitButtonLoading = false
      }
    },
    async handleAccessPlanMemberDelete (index, row) {
      let self = this
      try {
        await self.$confirm(self.$t('message.accessPlan.message.deleteAccessPlanMember.promptLabel', { device: row.device }), self.$t('message.common.label.prompt'), {
          confirmButtonText: self.$t('message.common.button.confirm'),
          cancelButtonText: self.$t('message.common.button.cancel'),
          type: 'warning'
        })
      } catch (e) {
        return
      }
      try {
        self.accessPlanLoading = true
        await self.$store.dispatch(`axios`, {
          method: 'delete',
          url: `/api/abs/devices/ip_access_member/${row.id}/`
        })
        self.$message({
          message: self.$t('message.accessPlan.message.deleteAccessPlanMember.successMessage'),
          type: 'success'
        })
        self.accessPlanMembers.splice(index, 1)
        self.loadingControl()
      } finally {
        self.accessPlanLoading = false
      }
    },

    async handleAccessPlanMemberChangeSpeed (index, row) {
      let self = this
      self.accessPlanMemberSpeed.editIndex = index
      self.accessPlanMemberSpeed.form.id = row.id
      self.accessPlanMemberSpeed.form.speed = row.speed
      this.accessPlanMember.speedOptionLoading = true
      try {
        this.accessPlanMemberSpeed.speedOption = await this.getAccessPlanMemberSpeed(row.cu)
      } finally {
        this.accessPlanMemberSpeed.speedOptionLoading = false
      }
      self.accessPlanMemberSpeed.visible = true
    },
    async accessPlanMemberSpeedChangeSubmit () {
      let self = this
      self.accessPlanMemberSpeed.submitButtonLoading = true
      try {
        let response = await self.$store.dispatch(`axios`, {
          method: 'patch',
          url: `/api/abs/devices/ip_access_member/${self.accessPlanMemberSpeed.form.id}/`,
          data: {
            speed: self.accessPlanMemberSpeed.form.speed
          }
        })
        // self.accessPlans.push(response.data)
        self.accessPlanMembers.find(item => item.id === response.data.id).speed = response.data.speed
        self.$message({
          message: self.$t('message.common.info.modifySuccess'),
          type: 'success'
        })
        self.accessPlanMemberSpeed.visible = false
        self.loadingControl()
      } finally {
        self.accessPlanMemberSpeed.submitButtonLoading = false
      }
    },
    loadingControl () {
      if (this.accessPlanLoadingTimeout) {
        clearTimeout(this.accessPlanLoadingTimeout)
        this.accessPlanLoadingTimeout = null
      }
      this.accessPlanOperateLoading = true
      this.accessPlanLoadingTimeout = setTimeout(() => {
        this.accessPlanOperateLoading = false
      }, 5000)
    }
  }
}
</script>

<style scoped lang="scss">
.form-table-content{
  margin-top: 30px;
  display: flex;
  flex-flow: row nowrap;
  align-content: center;
  .form-table-content-form{
    flex: 0 0 300px;
    border-radius: 6px;
  }
  .form-table-content-table{
    margin-left: 20px;
    flex: 1 0 350px;
    border-radius: 6px;
  }
}
</style>
